// 列表区可以显示所有的物料
// key对应的组件映射关系
import {
  ElButton,
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElCheckboxGroup,
  ElCheckbox,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElTree,
  ElIcon,
  ElMessage,
  ElDialog,
} from "element-plus";
import { events } from "@/packages/events";
import { iconMap } from "../common/contorlJsx/box";
import { nextTick, ref } from "vue";
import { downloadPDF } from "../common/pdf/index";
import { downloadExcel } from "../common/excel/index";
import { login } from "../common/api/index";
import deepcopy from "deepcopy";
function createEditorConfig() {
  const componentList = [];
  const componentMap = {};

  return {
    componentList,
    componentMap,
    register: (component) => {
      componentList.push(component);
      componentMap[component.key] = component;
    },
  };
}
export let registerConfig = createEditorConfig();
registerConfig.register({
  label: "背景板块",
  preview: () => (
    <div
      style={{ width: "100px", height: "50px", backgroundColor: "#f0f5eb" }}
    ></div>
  ),
  render: () => (
    <div
      style={{
        width: "100%",
        height: "100%",
        boxSizing: "border-box",
        minWidth: "1000px",
        minHeight: "100px",
      }}
    ></div>
  ),
  key: "box",
});
registerConfig.register({
  label: "示例文本",
  preview: () => <div class="hbh_text">示例文本</div>,
  render: (value) =>
    value.value ? (
      <div class="hbh_text">{value.value}</div>
    ) : (
      <div class="hbh_text">默认文本</div>
    ),
  key: "text",
});

registerConfig.register({
  label: "示例输入框",
  preview: () => <ElInput autofocus={false} placeholder="请输入内容"></ElInput>,
  render: (value) => {
    return (
      <ElInput
        v-model={value[value.custom]}
        placeholder={value.placeholder}
        onInput={() => {
          // console.log(value);
        }}
      ></ElInput>
    );
  },
  key: "input",
  value: "默认文字",
});

registerConfig.register({
  label: "示例下拉框",
  preview: () => {
    let value = "";
    return (
      <ElSelect v-model={value} placeholder="--请选择下拉--">
        <ElOption label={"测试"} value={0}></ElOption>
      </ElSelect>
    );
  },
  render: (value) => {
    return (
      <ElSelect
        v-model={value[value.custom]}
        clearable
        placeholder={value.placeholder}
      >
        {value.data.map((item) => {
          return <ElOption label={item.label} value={item.value}></ElOption>;
        })}
      </ElSelect>
    );
  },
  key: "select",
  value: "",
});
let elDatePicker = ref(new Date());
registerConfig.register({
  label: "示例日期时间选择器",
  preview: () => {
    let value = new Date();
    return (
      <ElDatePicker
        v-model={value}
        type="datetime"
        placeholder="Select date and time"
      />
    );
  },
  render: (value) => {
    return (
      <ElDatePicker
        v-model={value[value.custom]} //这里只是dialing对象下的一个value属性，不是响应式那层value,注意区分
        type="datetime"
        placeholder={value.placeholder}
      />
    );
  },
  key: "datetime",
  value: "",
});
let value2 = ["选中", "选中并禁用"];
registerConfig.register({
  label: "示例多选框",
  preview: () => {
    return (
      <ElCheckboxGroup v-model={value2}>
        <ElCheckbox label="选中" />
        <ElCheckbox label="未选中" />
        <ElCheckbox label="选中并禁用" disabled />
        <ElCheckbox label="未选中并禁用" disabled />
      </ElCheckboxGroup>
    );
  },
  render: (value) => {
    return (
      <ElCheckboxGroup v-model={value[value.custom]}>
        {value.data.map((item) => {
          return <ElCheckbox label={item.label} disabled={item.disabled} />;
        })}
      </ElCheckboxGroup>
    );
  },
  key: "checkbox",
  value: "",
});
registerConfig.register({
  label: "示例按钮",
  preview: () => (
    <ElButton
      onClick={() => {
        console.log("我是按钮");
      }}
    >
      示例按钮
    </ElButton>
  ),
  render: (value, globalData) => {
    const handleBtn = (val) => {
      switch (val.value) {
        case "查询":
          // console.log(allOptions);
          events.emit("switchDialog", true);
          break;
        case "重置":
          events.emit("switchDialog", false);

          // console.log(findComponent)
          break;
        default:
          break;
      }
    };
    return (
      <>
        <div
          class="hbh_button"
          onClick={() => {
            handleBtn(value);
          }}
        >
          {iconMap[value.icon] ? iconMap[value.icon](value.size) : ""}
          <span style={{ fontSize: `${value.size}px` }}>
            {value.value ? value.value : "默认文字"}
          </span>
        </div>
      </>
    );
  },
  key: "button",
  value: "",
});
registerConfig.register({
  label: "示例表格",
  preview: () => {
    let value = [
      {
        date: "2023-11-21",
        name: "胡炳华",
        address: "中国日本省小吃街666号",
      },
    ];
    return (
      <ElTable data={value} height="100">
        <ElTableColumn label="日期" prop="date" width="120" />
        <ElTableColumn label="姓名" prop="name" width="80" />
        <ElTableColumn label="地址" prop="address" />
      </ElTable>
    );
  },
  render: (value, globalData) => {
    const handleTableBtn = (row, item) => {
      //row，一行数据
      ElMessage(`点击了${item.name}`);
    };
    const handleControlBtn = (item) => {
      if ("child" in item) {
        return;
      }
      switch (item.id) {
        case 1:
          downloadPDF(
            document.querySelector(".el-scrollbar__view"),
            Date.now()
          );
          break;
        default:
          ElMessage(`异常`);
          break;
      }
    };
    const handleMouseEnter = (e, val) => {
      if (!val) {
        return;
      }
      e.target.nextSibling.style.display = "block";
    };
    const handleMouseLeave = (e, val) => {
      if (!val) {
        return;
      }
      e.target.nextSibling.style.display = "none";
    };
    const handleMouseEnter2 = (e) => {
      e.target.style.display = "block";
    };
    const handleMouseLeave2 = (e) => {
      e.target.style.display = "none";
    };
    const handleChildBtn = (child) => {
      let findTable = deepcopy(
        globalData.blocks.find((item) => item.key == "table")
      );
      switch (child.id) {
        case 1: //普通数据
          downloadExcel(findTable, child.id);
          break;
        case 2: //敏感数据
          downloadExcel(findTable, child.id);
          break;
        default:
          ElMessage(`异常`);
          break;
      }
    };
    return (
      <>
        <div class="hbh_tableContainer">
          <div class="tableControl">
            {value.controlBtn.map((item) => {
              if (item.show) {
                return (
                  <div class="tableBox">
                    <div
                      class="tableBtn"
                      style={{ color: item.color, borderColor: item.color }}
                      onClick={() => {
                        handleControlBtn(item);
                      }}
                      onMouseenter={(e) => {
                        handleMouseEnter(e, "child" in item);
                      }}
                      onMouseleave={(e) => {
                        handleMouseLeave(e, "child" in item);
                      }}
                    >
                      <ElIcon size={14} style={{ marginRight: "5px" }}>
                        <Setting />
                      </ElIcon>
                      <span style={{ fontSize: "14px" }}>{item.name}</span>
                    </div>
                    {"child" in item ? (
                      <div
                        class="btnChild"
                        onMouseenter={(e) => {
                          handleMouseEnter2(e);
                        }}
                        onMouseleave={(e) => {
                          handleMouseLeave2(e);
                        }}
                      >
                        <div class="showBox">
                          {item.child.map((child) => {
                            return (
                              <div
                                onClick={() => {
                                  handleChildBtn(child);
                                }}
                              >
                                {child.name}
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    ) : (
                      ""
                    )}
                  </div>
                );
              }
            })}
          </div>
          <ElTable
            width="100%"
            data={value.value}
            height={value.height - 130}
            empty-text="暂无数据"
          >
            <ElTableColumn type="selection" width="55" />
            {value.heads.map((item) => {
              return <ElTableColumn prop={item.prop} label={item.label} />;
            })}
            <ElTableColumn
              width="200"
              label={"操作"}
              v-slots={{
                default: ({ row }) => {
                  return (
                    <div class="tableSolt">
                      {value.tableInBtn.map((item) => {
                        return (
                          <div
                            class="hbh_table_button"
                            v-show={item.show}
                            style={{ backgroundColor: item.color }}
                            onClick={() => {
                              handleTableBtn(row, item);
                            }}
                          >
                            {iconMap[item.icon]
                              ? iconMap[item.icon](item.size)
                              : ""}
                            <span>{item.name}</span>
                          </div>
                        );
                      })}
                    </div>
                  );
                },
              }}
            ></ElTableColumn>
          </ElTable>
          <div class="pagination">
            <ElPagination
              background={value.pagination.backgroundSwitch}
              // page-size={value.pagination.pageSize}
              // current-page={value.pagination.pageNum}
              pageSizes={[100, 200, 300, 400]}
              samll={value.pagination.samll}
              layout="sizes, prev, pager, next"
              total={value.pagination.total}
            />
          </div>
        </div>
      </>
    );
  },
  key: "table",
  value: "",
});
// registerConfig.register({
//   label: "示例分页",
//   preview: () => {
//     return <ElPagination layout="prev, pager, next" total={50} />;
//   },
//   render: (value) => (
//     <ElPagination
//       background={value.background}
//       pageSizes={[100, 200, 300, 400]}
//       samll={value.samll}
//       layout="sizes, prev, pager, next"
//       total={value.value}
//     />
//   ),
//   key: "pagination",
//   value: "",
// });
const expandedKeys = ref(["0-0-0", "0-0-1","0-1-0"]);
const selectedKeys = ref([]);
const checkedKeys = ref([]);
const treeData = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      {
        title: 'leaf 0-0',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'leaf 0-1',
        key: '0-0-1',
        isLeaf: true,
      },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      {
        title: 'leaf 1-0',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: 'leaf 1-1',
        key: '0-1-1',
        isLeaf: true,
      },
    ],
  },
];
registerConfig.register({
  label: "树形控件",
  preview: () => {
    return (
      <>
        <a-directory-tree
          v-model={[expandedKeys.value, "expandedKeys"]}
          v-model={[selectedKeys.value, "selectedKeys"]}
          multiple
          tree-data={treeData}
        ></a-directory-tree>
      </>
    );
  },

  render: (value, globalData) => {
    const handleBtn = (val) => {
      if (val == 1) {
        value.expandedKeys = [];
        value.value.forEach((element) => {
          value.expandedKeys.push(element.key);
        });
      } else {
        value.expandedKeys = [];
      }
    };
    return (
      <>
        <div class="hbh_searchTree">
          <div class="serachTool">
            <div class="searchTip">关键字:</div>
            <div class="searchInput">
              <ElInput
                v-model={value.serachValue}
                onBlur={() => {
                  ElMessage(`输入了关键字${value.serachValue}`);
                }}
              ></ElInput>
            </div>
            <div class="treeTool">
              <span
                onClick={() => {
                  handleBtn(1);
                }}
              >
                展开
              </span>
              <span
                onClick={() => {
                  handleBtn(2);
                }}
              >
                折叠
              </span>
            </div>
            <div class="mainTree">
              <a-directory-tree
                v-model={[value.expandedKeys, "expandedKeys"]}
                v-model={[value.selectedKeys, "selectedKeys"]}
                multiple
                tree-data={value.value}
              ></a-directory-tree>
            </div>
          </div>
          <div class="changeState">
            {/* <div class={value.open ? "off" : "open"} onClick={handleState}>
              <span></span>
            </div> */}
          </div>
          <div
            class="splitBox"
            style={{ backgroundColor: globalData.container.backgroundColor }}
          ></div>
        </div>
      </>
    );
  },
  key: "tree",
});
